<template>
<div class="bb">
  <div id="main" style="width:700px ;height:500px;"></div>
</div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {}
    },
    mounted: function() {
      this.$nextTick(function() {
        this.getPie()
      })
    },
    methods: {
      getPie() {
        // 绘制图表
        var myChart = echarts.init(document.getElementById('main'))
        // 指定图表的配置项和数据
        var option = {
          //标题
          title: {
            text: '各学院教师比例',
            x: '40%' ,          //标题位置
          },
          //鼠标划过时饼状图上显示的数据
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          //图例
          legend: {
            data: ['软件工程学院', '教育与艺术学院', '城乡建筑学院'],
            left: "10%",
            top: "10%",
            orient: "vertical"
          },
          //饼图中各模块的颜色
          color: ['#32dadd', '#b6a2de', '#5ab1ef'],
          // 饼图数据
          series: {
            type: 'pie',             //echarts图的类型   pie代表饼图
            radius: '70%',           //饼图中饼状部分的大小所占整个父元素的百分比
            center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
            data: [                  //每个模块的名字和值
              { name: '软件工程学院', value: 10 },
              { name: '教育与艺术学院', value: 30},
              { name: '城乡建筑学院', value: 50 }
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                  // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                },
                labelLine: {
                  show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                }
              }
            },
          }
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    }
  }
</script>

<style>
.bb{
    padding-left: 100px;
}
</style>

